<!DOCTYPE html>
<html>
	<head>
		<title>分栏</title>
		<meta charset="utf-8"/>
		<style type="text/css">
			*{
				padding: 0;
				margin: 0;
			}
			ul{
				width: 750px;
				margin: 30px auto;  /*上下是0 左右剩下的平分*/
			}
			li{
				list-style: none;
				display: inline-block;
				margin-right: 10px;
				border:1px solid grey;
			}
			img:hover{
				opacity: 0.4;
			}
		</style>
	</head>
	<body>
		<ul>
			<li>
				<img src="1.jpg" alt="图片1" />
				<p>此处添加图片描述</p>
			</li>
			<li>
				<img src="2.jpg" alt="图片2" />
				<p>此处添加图片描述</p>
			</li>
			<li>
				<img src="3.jpg" alt="图片3" />
				<p>此处添加图片描述</p>
			</li>
			<li>
				<img src="4.jpg" alt="图片4" />
				<p>此处添加图片描述</p>
			</li>
		</ul>
	</body>
</html>